<template>
  <div v-show="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/">个人中心</Breadcrumb-item>
          <Breadcrumb-item href="/components/AccountInfo">账号信息</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <p class="user_info_title">基本资料</p>
      <p class="user_info_item"><span class="user_info_item_detail">账号名称</span> {{userInfo.userName}}</p>
      <p class="user_info_item"><span class="user_info_item_detail">绑定手机</span> {{userInfo.phoneNumber}}</p>
      <p class="user_info_item"><span class="user_info_item_detail">电子邮箱</span> {{userInfo.userEmail}}</p>
    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class AccountInfo extends Vue {
  @Prop({ type: Boolean, default: false }) value

  get userInfo() {
    return this.$store.getters['session/user']
  }
}
</script>
<style scoped>
.user_info_title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.user_info_item {
  font-size: 1.4rem;
  padding: 1rem 0;
}
.user_info_item_detail {
  color: #999;
  padding-right: 1rem;
}
</style>
